@import '../bootstrap'

.alert
  border-radius: $alert-border-radius
  border-width: $alert-border-width
  border-style: solid
  border-color: $material-light.dividers !important
  color: #fff
  display: flex
  max-width: 62px
  font-size: $alert-font-size
  margin: $alert-margin
  padding: $alert-padding
  position: relative
  transition: $primary-transition

  .alert__icon.icon,
  &__dismissible .icon
    align-self: center
    color: $alert-icon-color
    font-size: $alert-icon-font-size
    width: 32px

  &__icon
    margin-bottom: $alert-padding

  &__dismissible
    align-self: flex-start
    margin-top: $alert-padding
    margin-bottom: 0
    text-decoration: none
    transition: $primary-transition

    &:hover
      color: lighten($alert-icon-color, 10%)

  &--no-icon
    .alert__icon
      display: none

  > div
    flex: 1

  @media screen and (max-width: $grid-breakpoints.sm)
    &__icon
      display: none
